<template>
    <el-container class="applet">
        <el-main class="wrapper main">
            <section class="panel">
                <div class="panel-body">
                    <div class="btn-group" style="margin-bottom: 15px">
                        <el-button @click="list" type="primary" icon="fa fa-refresh"
                                   size="small"> 刷新
                        </el-button>
                    </div>
                    <el-row :gutter="24">
                        <el-col :span="12">
                            <el-card class="box-card" style="height: 600px;margin-bottom: 150px;">
                                <div slot="header" class="clearfix">
                                    <span>管理员本月统计</span>
                                </div>
                                <table width="100%" style="text-align: center">
                                    <tr>
                                        <td width="16%">管理员</td>
                                        <td width="28%">浏览量</td>
                                        <td width="28%">有效量</td>
                                    </tr>
                                    <tr v-for="(items,index) in counts.countCurrentMonthNum" :key="index"
                                        class="text item">
                                        <td>{{manages[items.admin_id]}}</td>
                                        <td><span style="color: red">{{items.views}}</span></td>
                                        <td><span style="color: red">{{items.shareins}}</span></td>
                                    </tr>
                                </table>
                            </el-card>
                        </el-col>
                        <el-col :span="12">
                            <el-card class="box-card" style="height: 600px;margin-bottom: 150px;">
                                <div slot="header" class="clearfix">
                                    <span>管理员上月统计</span>
                                </div>
                                <table width="100%" style="text-align: center">
                                    <tr>
                                        <td width="16%">管理员</td>
                                        <td width="28%">浏览量</td>
                                        <td width="28%">有效量</td>
                                    </tr>
                                    <tr v-for="(item,index) in counts.countCurrentLastMonthNum" :key="index"
                                        class="text item">
                                        <td>{{manages[item.admin_id]}}</td>
                                        <td><span style="color: red">{{item.views}}</span></td>
                                        <td><span style="color: red">{{item.shareins}}</span></td>
                                    </tr>
                                </table>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>
            </section>
        </el-main>
    </el-container>
</template>
<script>
    import {mapGetters} from 'vuex';
    import {getCount,OperateAll} from '@/utils/request';
    export default {
        data() {
            return {
                counts: [],
                manages: [],
                params:{applet:"aikan"}
            }
        },
        activated() {
            this.$store.dispatch('setAiKanActive', '/aikan');
            OperateAll().then((res)=>{
                if(res.code){
                    this.$message.error(res.msg);
                }else{
                    this.manages = res.data;
                    this.list();
                }
            })
        },
        computed: {
            ...mapGetters([ 'loading']),
        },
        methods: {
            list() {
                getCount({params:this.params}).then((res) => {
                    if (res.code) {
                        this.$message.error(res.msg);
                    } else {
                        this.counts = res.data;
                    }
                })

            }
        }
    }
</script>
<style scoped>
    .text{
        border-bottom: 1px solid #ddd;
    }
</style>

